<template>
  <basic-container>
    <div class="text-right">
      <el-button-group size="small">
        <el-button type="primary" @click="$router.close()" icon="el-icon-back">返回</el-button>
        <el-dropdown>
          <el-button type="primary">
            保存
            <el-icon class="el-icon--right">
              <arrow-down/>
            </el-icon>
          </el-button>
          <template #dropdown>
            <el-dropdown-menu>
              <el-dropdown-item @click.native="submitForm(saveConfig)">保存</el-dropdown-item>
              <el-dropdown-item @click.native="submitForm(genCode)">保存并生成代码</el-dropdown-item>
            </el-dropdown-menu>
          </template>
        </el-dropdown>

        <el-dropdown>
          <el-button type="primary">
            预览
            <el-icon class="el-icon--right">
              <arrow-down/>
            </el-icon>
          </el-button>
          <template #dropdown>
            <el-dropdown-menu>
              <el-dropdown-item @click.native="$refs.editTableOption.preview('table')">预览表格</el-dropdown-item>
              <el-dropdown-item @click.native="$refs.editTableOption.preview('form')">预览表单</el-dropdown-item>
              <el-dropdown-item @click.native="$refs.editTableOption.preview('json')">查看配置</el-dropdown-item>
            </el-dropdown-menu>
          </template>
        </el-dropdown>

      </el-button-group>
    </div>
    <el-tabs v-loading="loading" v-model="tabActiveName" type="border-card">
      <el-tab-pane name="baseTable" label="数据表信息">
        <edit-table-base v-if="tableBaseModel" ref="editTableBase" :box-type="boxType"
                         :form-model-data="tableBaseModel"></edit-table-base>
      </el-tab-pane>
      <el-tab-pane name="tableColumn" label="数据表设计">
        <edit-table-option v-if="tableOption" style="min-height: 600px" ref="editTableOption"
                           :form-option="tableOption"></edit-table-option>
      </el-tab-pane>
      <el-tab-pane name="tableGenCodeConfig" label="代码生成配置">
        <edit-table-gen-code v-if="tableGenModel" v-model="tableGenModel"
                             ref="tableGenCodeConfig"></edit-table-gen-code>
      </el-tab-pane>
    </el-tabs>
  </basic-container>
</template>
<script>
import EditTableBase from "@/views/start/development/table/editTableBase.vue";
import editTableGenCode from "@/views/start/development/table/editTableGenCode.vue";
import sysDataTableConfigApi from "@/api/start/development/sysDataTableConfigApi";
import EditTableOption from "@/views/start/development/table/editTableOption.vue";
import {genCode, saveOrUpdate} from "@/api/start/development/dataTableApi";
import {createDownloadFile} from "utils/util";

export default {
  name: "editTableIndex",
  components: {EditTableOption, editTableGenCode, EditTableBase},
  data() {
    return {
      tabActiveName: 'baseTable',
      tableId: null,
      tableModel: null,
      tableOption: null,
      tableGenModel: null,
      tableBaseModel: null,
      boxType: "add",
      loading: true,

    }
  },
  created() {
    this.tableId = this.$route.params.tableId
    this.loading = true;
    this.loadTable()
  },
  methods: {
    loadTable() {
      if (!this.tableId) {
        this.loading = false;
        return
      }
      this.boxType = "edit"
      sysDataTableConfigApi.getById(this.tableId).then(res => {
        let data = res.data.data;
        this.tableOption = data.crudOption || {}
        let genModel = {}
        genModel.packageName = data.packageName
        genModel.moduleName = data.moduleName
        genModel.menuParentId = data.menuParentId
        genModel.author = data.author
        genModel.tablePrefix = data.tablePrefix
        this.tableGenModel = genModel;
        let tableBase = {}
        tableBase.dataSourceKeyFlag = data.dataSourceKeyFlag
        tableBase.tableComment = data.tableComment
        tableBase.tableName = data.tableName
        tableBase.tableName = data.tableName
        tableBase.isCreate = data.isCreate
        this.tableBaseModel = tableBase;
        this.loading = false;
      })
    },

    submitForm(callBack) {
      let formModel = {};
      this.$refs.editTableBase.validate().then((res) => {
        formModel = res
        // console.log("formModel1", formModel, res)
        return this.$refs.tableGenCodeConfig.validate()
      }).then((res) => {
        formModel = Object.assign(formModel, res)
        // console.log("formModel2", formModel, res)
        return this.$refs.editTableOption.validate()
      }).then(res => {
        formModel.crudOption = res;
        formModel.id = this.tableId
        if (callBack) {
          callBack(formModel)
        }


      }).catch(err => {
        console.error(err)
        this.$message.error("请检查您的配置是否正确")
      })
    },

    saveConfig(formModel) {
      saveOrUpdate(formModel).then(res => {
        this.$message.success("保存成功")
      })
    },
    genCode(formModel) {
      console.log("formModel", formModel)
      saveOrUpdate(formModel).then(res => {
        this.$message.success("保存成功")
        return genCode(res.data.data.id)
      }).then(res => {
        createDownloadFile(res, "startCode.zip")
      })
    }
  }

}
</script>
